<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>0.0 0.0</title>
        <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
        <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
        <script type="text/javascript">
            //<![CDATA[
            var map;
            var markers;
            var proj;
            function parseCoords() {
                data = document.location.href.split("?");
                if (data.length < 2) {
                    res = new Array(0.0, 0.0, 1);
                } else {
                    c = data[1].split(",");
                    lat = c[0]; lng = c[1];
                    res = new Array(parseFloat(lat), parseFloat(lng), 11);
                };
                return res;
            };
            function clickFunc(point) {
                coords = point.clone();
                coords = coords.transform(map.getProjectionObject(), proj);
                document.title = coords.lat.toFixed(5) + " " + coords.lon.toFixed(5);
                size = new OpenLayers.Size(21, 25);
                offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
                icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png', size, offset);
                if (markers.markers.length == 1) {
                    markers.removeMarker(markers.markers[0]);
                };
                markers.addMarker(new OpenLayers.Marker(point, icon));
            };
            OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
                defaultHandlerOptions: {
                    'single': true, 'double': false,
                    'pixelTolerance': 0,
                    'stopSingle': false, 'stopDouble': false
                },
                initialize: function(arguments) {
                    this.handlerOptions = OpenLayers.Util.extend({}, this.defaultHandlerOptions);
                    OpenLayers.Control.prototype.initialize.apply(this, arguments);
                    this.handler = new OpenLayers.Handler.Click(this, {'click': this.trigger}, this.handlerOptions);
                },
                trigger: function(e) {
                    point = map.getLonLatFromViewPortPx(e.xy);
                    clickFunc(point);
                } }
            );
            function initialize() {
                res = parseCoords();
                lat = res[0]; lng = res[1]; zoom = res[2];
                proj = new OpenLayers.Projection("EPSG:4326");
                map = new OpenLayers.Map("map_canvas", {
                    controls: [new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoom()],
                    units: 'm',
                    projection: new OpenLayers.Projection("EPSG:900913"),
                    displayProjection: proj
                    }
                );
                map.addLayer(new OpenLayers.Layer.OSM.Mapnik("Mapnik"));
                markers = new OpenLayers.Layer.Markers("Markers");
                map.addLayer(markers);
                centre = new OpenLayers.LonLat(lng, lat).transform(proj, map.getProjectionObject());
                map.setCenter(centre, zoom);
                if (lat != 0 || lng != 0) {
                    clickFunc(centre);
                };
                click = new OpenLayers.Control.Click();
                map.addControl(click);
                click.activate();
            };
            //]]>
        </script>
    </head>
    <body onload="initialize();">
        <div id="map_canvas" style="width:300px; height:250px;"></div>
    </body>
</html>
